<template name="basics">
    <view class="margin-top">
        <scroll-view scroll-y class="page">
            <view class="nav-list">
                <navigator hover-class="none" :url="'/pages/basics/' + item.name" class="nav-li" navigateTo :class="'bg-'+item.color"
                    :style="[{animation: 'show ' + ((index+1)*0.2+1) + 's 1'}]" v-for="(item,index) in elements" :key="index">
                    <view class="nav-title">{{item.title}}</view>
                    <view class="nav-name">{{item.name}}</view>
                </navigator>
            </view>
            <view class="cu-tabbar-height"></view>
        </scroll-view>
    </view>
</template>

<script>
    export default {
        name: "basics",
        data() {
            return {
                elements: [{
                        title: '按钮',
                        name: 'button',
                        color: 'pink',
                    },
                    {
                        title: '标签/徽章',
                        name: 'tag',
                        color: 'brown',
                    },
                    {
                        title: '操作条',
                        name: 'bar',
                        color: 'olive',
                    },
                    {
                        title: '头像',
                        name: 'avatar',
                        color: 'mauve',
                    },
                    {
                        title: '布局',
                        name: 'layout',
                        color: 'brown',
                    },
                    {
                        title: '文本',
                        name: 'text',
                        color: 'purple'
                    },
                    {
                        title: '图标',
                        name: 'icon',
                        color: 'pink'
                    }
                ],
            };
        }
    }
</script>

<style>
    .bg-red {
        background-color: #e54d42;
        color: #ffffff;
    }

    .bg-orange {
        background-color: #f37b1d;
        color: #ffffff;
    }



    .bg-olive {
        background-color: #8dc63f;
        color: #ffffff;
    }



    .bg-cyan {
        background-color: #1cbbb4;
        color: #ffffff;
    }



    .bg-purple {
        background-color: #6739b6;
        color: #ffffff;
    }

    .bg-mauve {
        background-color: #9c26b0;
        color: #ffffff;
    }

    .bg-pink {
        background-color: #e03997;
        color: #ffffff;
    }

    .bg-brown {
        background-color: #a5673f;
        color: #ffffff;
    }
</style>
